<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="用户信息完善" size="large" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="name"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="telephone"
        name="telephone"
        type="tel"
        label="电话"
        placeholder="电话"
        :rules="[{ required: true, message: '请填写电话' }]"
      />
      <van-field
        clickable
        readonly
        label="生日"
        name="birthday"
        :value="birthday"
        placeholder="点击选择日期"
        @click="onClick"
        :rules="[{ required: true, message: '请填写出生日期' }]"
      />

      <div style="margin: 32px 64px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="date"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getWeChatUser, updateWeChatUser } from "@/api/wechat";
import { formatDateTime } from "@/utils/datetime";

export default {
  name: "ClientInfo",
  data() {
    return {
      title: this.$route.meta.title,
      name: "",
      telephone: "",
      birthday: formatDateTime(new Date(), "YYYY-MM-DD"),
      showPicker: false,
      currentDate: new Date(),
      maxDate: new Date(),
    };
  },
  components: {
    NavBar,
  },
  computed: {
    minDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() - 60);
      return new Date(datetime);
    },
  },
  mounted() {
    this.getWeChatUserByOpenid();
  },
  methods: {
    onClick() {
      this.showPicker = true;
      this.currentDate = new Date(this.birthday);
    },
    onSubmit(values) {
      const openid = localStorage.getItem("openid");

      values["openid"] = openid;
      console.log(values);

      this.updateUserInfo(values); //修改
    },
    getWeChatUserByOpenid() {
      const openid = localStorage.getItem("openid");
      getWeChatUser(openid)
        .then((res) => {
          this.name = res.data.name;
          this.telephone = res.data.telephone;
          this.birthday = res.data.birthday;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateUserInfo(userInfo) {
      updateWeChatUser(userInfo)
        .then((res) => {
          if (res.data.name.length > 0 && res.data.telephone.length > 0) {
            this.$notify({
              type: "success",
              message: "完善信息成功!",
            });
            this.$router.push("/card");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    onConfirm(date) {
      this.showPicker = false;
      const birthday = formatDateTime(date, "YYYY-MM-DD");
      this.birthday = birthday;
    },
  },
};
</script>

<style scoped>
</style>
